<!--
 * @Author: your name
 * @Date: 2021-03-10 15:11:06
 * @LastEditTime: 2021-05-31 12:00:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuePro\src\views\login\PcLogin.vue
-->
<template>
  <div class="mobile-login-wrapper">
    <h1>电脑端登录页面</h1>
    <router-link to="/home">HOME</router-link>
    <div>
      <div>20111031距今：{{ time_output }}</div>
      <div>{{ data_output }}</div>
      <div>语言：{{ lanuage_output }}</div>
      <div>当前时间：（h）{{ my_time }}</div>
      <div>
        <p>测试白名单方法：</p>
        <p>白名单：{{ JSON.stringify(list) }}</p>
        <p>目标数据：{{ aimUrl }}</p>
        <div>结果:{{ JSON.stringify(isIn) }}</div>
      </div>
    </div>
    <div style="display: flex;">
      <span class="btn-box" @click="handleClickMsg">Msg</span>
      <span class="btn-box" @click="handleClickConfirm">Tips</span>
      <span class="btn-box" @click="handleClickLoading">Loading</span>
    </div>
    <div>
      <router-link :to="'/property/options'" class="btn"
        >Vue实例demo</router-link
      >
    </div>
  </div>
</template>

<script>
import moment from "moment";
moment.locale("zh-cn");

export default {
  name: "PcLogin",

  data() {
    return {
      isIn: "aa",
      list: ["/user/index", "/user/add", "/user/edit"],
      aimUrl: "/user/del",
    };
  },

  computed: {
    time_output() {
      return moment("20111031", "YYYYMMDD").fromNow();
    },
    data_output() {
      return moment().format("LLL"); // 2021年5月6日
    },
    lanuage_output() {
      return moment.locale();
    },
    my_time() {
      return moment(new Date()).hours();
    },
  },

  mounted() {
    this.timeFormate();

    const list = this.list;
    const flag = this.isInWhiteList(list, this.aimUrl);
    console.log("flag", flag);
    this.isIn = flag;
  },

  methods: {
    isInWhiteList(whiteList = [], url = "") {
      if (!whiteList.length) return true;
      if (!url) throw new Error("目标地址不能为空");
      return whiteList.some((item) => {
        console.log("item", item);
        console.log("url", url);
        console.log("url === item", url === item);
        return item === url;
      });
    },
    // 时间戳
    timeFormate(time = 0, typeFlag = 0) {
      console.log("time", time);
      console.log("typeFlag", typeFlag);
      let outTime = null;
      if (typeof time !== Number) time = Number(time);
      switch (typeFlag) {
        case 0:
          outTime = moment(time).format("");
      }
    },

    handleClickMsg() {
      this.$s({
        message: "hello word!!!",
      });
    },
    handleClickConfirm() {
      this.$yioks_confirm({
        confirmMsg: "惟有饮者留其名",
        type: "success",
        // btnList: [{ classType: 'confirm', funFlag: 'suc', benText: 'confirm' },
        //   { classType: 'cancel', funFlag: 'err', benText: 'cancel' }
        // ]
      })
        .then((res) => {
          console.log("用户确认了操作", res);
        })
        .catch((err) => {
          console.log("用户取消了该操作", err);
        });
    },
    handleClickLoading() {
      this.$yioks_loading.open();
      setTimeout(() => {
        console.log("components is ready for close loading", "");
        this.$yioks_loading.close();
      }, 5000);
    },
  },
};
</script>


<style lang="stylus" scoped>
.btn-box
  padding 10px 20px
  background-color #4cd964
  border-radius 4px
  color #fff
  cursor pointer
.btn
  padding 8px 15px
  margin 5px 10px
</style>